<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Q&A - jQuery Mobile Demos</title>
    <link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.3.1.min.css">
    <link rel="stylesheet" href="../_assets/css/jqm-demos.css">
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="../js/jquery.js"></script>
    <script src="../_assets/js/index.js"></script>
    <script src="../js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" class="jqm-demos jqm-faq">

<div data-role="header" class="jqm-header">
<h1 class="jqm-logo"><a href="../"><img src="../_assets/img/jquery-logo.png" alt="jQuery Mobile Framework"></a></h1>
<a href="#" class="jqm-navmenu-link" data-icon="bars" data-iconpos="notext">Navigation</a>
<a href="#" class="jqm-search-link" data-icon="search" data-iconpos="notext">Search</a>

<div class="jqm-search">
<ul class="jqm-list">
<li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini"><a
        href="widgets/accordions/">Accordion</a></li>

<li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/"
                                                                                      data-ajax="false">AJAX
    Navigation</a></li>

<li data-section="Widgets"
    data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
        href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

<li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a
        href="widgets/buttons/" data-ajax="false">Buttons</a></li>

<li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
        href="widgets/checkbox/">Checkboxes</a></li>

<li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                data-ajax="false">Collapsibles</a></li>

<li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
        href="widgets/controlgroups/">Controlgroup</a></li>

<li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

<li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
        href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

<li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
        href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

<li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
    toolbar</a></li>

<li data-section="Widgets"
    data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements"><a
        href="widgets/forms/">Form elements</a></li>

<li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
        href="widgets/grids/">Grids</a></li>

<li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a href="widgets/headers/">Header
    toolbar</a></li>

<li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a></li>

<li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a href="widgets/links/">Links</a>
</li>

<li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
        href="widgets/listviews/" data-ajax="false">Listviews</a></li>

<li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                  data-ajax="false">Loader overlay</a>
</li>

<li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
        href="widgets/navbar/" data-ajax="false">Navbar</a></li>

<li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
        href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

<li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a
        href="widgets/pages/">Pages</a></li>

<li data-section="Widgets"
    data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
        href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets"
    data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition"><a
        href="widgets/popup/">Popup</a></li>

<li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
        href="widgets/radiobuttons/">Radio buttons</a></li>

<li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
        href="widgets/selects/">Select</a></li>

<li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
        href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

<li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a
        href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span
        class="ui-li-count">New</span></a></li>

<li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular"><a
        href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
        href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

<li data-section="Widgets"
    data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms"><a
        href="widgets/textinputs/">Text inputs & textarea</a></li>

<li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop"
    data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

<li data-role="list-divider">Collapsibles</li>

<li data-section="Demo Showcase" data-filtertext="dynamic collapsible set accordion append expand"><a
        href="examples/collapsibles/dynamic-collapsible.html" data-ajax="false">Dynamic collapsible</a></li>

<li data-role="list-divider">Controlgroups</li>

<li data-section="Demo Showcase" data-filtertext="dynamic controlgroup buttons selects checkboxes forms"><a
        href="examples/controlgroups/dynamic-controlgroup.html" data-ajax="false">Dynamic controlgroup</a></li>

<li data-role="list-divider">Listviews</li>

<li data-section="Demo Showcase" data-filtertext="grid listview responsive grids responsive listviews lists ul"><a
        href="examples/listviews/grid-listview.html" data-ajax="false">Grid Listview</a></li>

<li data-section="Demo Showcase" data-filtertext="autodividers anchor jump scroll linkbars listviews lists ul"><a
        href="examples/listviews/autodividers-linkbar.html" data-ajax="false">Autodividers Linkbar</a></li>

<li data-section="Demo Showcase" data-filtertext="listviews autodividers selector autodividersselector lists ul ol"><a
        href="examples/listviews/autodividers-selector.html" data-ajax="false">Autodividers Selector</a></li>

<li data-role="list-divider">Navigation</li>

<li data-section="Demo Showcase" data-filtertext="backbone and require.js example navigation router"><a
        href="examples/backbone-require/index.html" data-ajax="false">Backbone and Require.js example</a></li>

<li data-section="Demo Showcase" data-filtertext="server redirection with server-side support php"><a
        href="examples/redirect/" data-ajax="false">Redirection with server-side support</a></li>

<li data-role="list-divider">Panels</li>

<li data-section="Demo Showcase"
    data-filtertext="panel styling slide panels sliding panels shadow rwd responsive breakpoint"><a
        href="examples/panels/panel-styling.html" data-ajax="false">Panel styling</a></li>

<li data-section="Demo Showcase" data-filtertext="open panel on swipe panels left right"><a
        href="examples/panels/panel-swipe-open.html" data-ajax="false">Open panel on swipe</a></li>

<li data-role="list-divider">Popups</li>

<li data-section="Demo Showcase" data-filtertext="dynamic popups popup images lightbox"><a
        href="examples/popups/dynamic-popup.html" data-ajax="false">Dynamic popup</a></li>

<li data-section="Demo Showcase" data-filtertext="arrow popups popover"><a href="examples/popups/arrow.html"
                                                                           data-ajax="false">Popup with arrow</a></li>

<li data-role="list-divider">Responsive Tables</li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow stack custom styles"><a
        href="examples/tables/movie-list.html" data-ajax="false">Reflow: Custom styles</a></li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow heading groups rwd breakpoint"><a
        href="examples/tables/financial-grouped-reflow.html" data-ajax="false">Reflow: Heading groups</a></li>

<li data-section="Demo Showcase" data-filtertext="responsive tables reflow refresh method dynamically inject data"><a
        href="examples/tables/reflow-refresh.html" data-ajax="false">Reflow: Refresh method</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables column toggle hide rwd breakpoint customization options"><a
        href="examples/tables/movie-list-toggle-options.html" data-ajax="false">Column toggle: Customization options</a>
</li>

<li data-section="Demo Showcase" data-filtertext="responsive tables column toggle heading groups rwd breakpoint"><a
        href="examples/tables/financial-grouped-columns.html" data-ajax="false">Column toggle: Heading groups</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables column toggle refresh method dynamically inject data"><a
        href="examples/tables/columntoggle-refresh.html" data-ajax="false">Column toggle: Refresh method</a></li>

<li data-section="Demo Showcase"
    data-filtertext="responsive tables table column toggle phone comparison rwd breakpoint"><a
        href="examples/tables/phone-compare.html" data-ajax="false">Column toggle demo: Phone comparison</a></li>

<li data-role="list-divider">Sliders</li>

<li data-section="Demo Showcase" data-filtertext="slider tooltip handle value extension input range sliders forms"><a
        href="examples/slider/tooltip.html" data-ajax="false">Tooltip extension</a></li>

<li data-role="list-divider">Swipe</li>

<li data-section="Demo Showcase" data-filtertext="swipe to navigate page transitions navigation"><a
        href="examples/swipe/swipe-page.html" data-ajax="false">Swipe to navigate</a></li>

<li data-section="Demo Showcase" data-filtertext="swipe to delete list item listviews lists ul ol"><a
        href="examples/swipe/swipe-list.html" data-ajax="false">Swipe to delete list item</a></li>

<li data-role="list-divider">Forms</li>

<li data-section="Questions & Answers" data-filtertext="CSS styles apply widget scope wrap selector customize"><a
        href="faq/question-template.html">Why won't my CSS styles apply correctly to a widget?</a></li>

<li data-section="Questions & Answers" data-filtertext="form update value enhance pageinit refresh"><a
        href="faq/updating-the-value-of-enhanced-form-elements-does-not-work.html">Updating the value of enhanced form
    elements does not work.</a></li>

<li data-section="Questions & Answers"
    data-filtertext="HTML 5 inputs appearance keyboard picker calendar date time slider file color"><a
        href="faq/my-html-5-inputs-look-different-in-browsers.html">My HTML 5 inputs look different across devices and
    browsers.</a></li>

<li data-section="Questions & Answers" data-filtertext="range search inputs slider number text degrade"><a
        href="faq/my-range-search-input-type-is-being-changed.html">My range or search inputs are being change to
    number/text.</a></li>

<li data-section="Questions & Answers" data-filtertext="custom select popup dialog logic"><a
        href="faq/sometimes-custom-select-shows-as-dialog-popup.html">Sometimes my custom select shows as a popup other
    times its a dialog.</a></li>

<li data-section="Questions & Answers" data-filtertext="disable button issue class method"><a
        href="faq/disabling-a-button-does-not-work.html">Disabling a button does not work.</a></li>

<li data-section="Questions & Answers" data-filtertext="fixed toolbar header footer fullscreen select input bug issue">
    <a href="faq/controls-in-header-footer.html">Controls in my fixed header or footer are not responding or behave
        erratically.</a></li>

<li data-role="list-divider">Pages</li>

<li data-section="Questions & Answers"
    data-filtertext="head load scripts styles pageinit onload pagebeforecreate ajax nav pages"><a
        href="faq/scripts-and-styles-not-loading.html">Why aren't my scripts and styles loading?</a></li>

<li data-section="Questions & Answers" data-filtertext="document.ready onload paginit DOM ready on ready scripts "><a
        href="faq/dom-ready-not-working.html">Why isn't DOM ready working for my scripts?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav load page mobile.loadpage"><a
        href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav multi page document load"><a
        href="faq/why-is-only-the-first-page-loaded.html">Why is only the first page of my multi page document
    loaded?</a></li>

<li data-section="Questions & Answers" data-filtertext="pass url query params ajax nav"><a
        href="faq/pass-query-params-to-page.html">I'm trying to pass query params to a page but it's not working?</a>
</li>

<li data-section="Questions & Answers" data-filtertext="hash pass parameters information ajax nav"><a
        href="faq/pass-via-the-hash-to-page.html">I'm trying to pass information via the hash but it's not working?</a>
</li>

<li data-section="Questions & Answers" data-filtertext="application cache status error isLocal ajax nav"><a
        href="faq/the-application-cache-is-not-working.html">I'm trying to use the application cache but it's not
    working.</a></li>

<li data-section="Questions & Answers"
    data-filtertext=">create refresh event trigger pageInit refresh method content injected page not enhanced."><a
        href="faq/injected-content-is-not-enhanced.html">Content injected into a page is not enhanced.</a></li>

<li data-section="Questions & Answers" data-filtertext=">create trigger event pageInit injected HTML"><a
        href="faq/triggering-create-on-injected-content-does-not-work.html">Triggering create on injected HTML does not
    work.</a></li>

<li data-section="Questions & Answers" data-filtertext="auto-enhance element stop preventnative role none"><a
        href="faq/how-can-i-stop-auto-enhancement-of-elements.html">How can I stop JQM from auto-enhancing an
    element?</a></li>

<li data-section="Questions & Answers"
    data-filtertext="auto-enhance block container parent stop preventnative role none"><a
        href="faq/how-can-i-stop-auto-enhancement-of-a-block-of-elements.html">How can I stop JQM from enhancing a block
    of elements?</a></li>

<li data-section="Questions & Answers" data-filtertext="page title ajax nav head"><a
        href="faq/how-do-i-control-page-titles.html">How do I control page titles?</a></li>

<li data-section="Questions & Answers" data-filtertext="ajax nav load page loadPage"><a
        href="faq/how-do-i-load-a-page.html">How do I load a page?</a></li>

<li data-role="list-divider">Events</li>

<li data-section="Questions & Answers"
    data-filtertext="touch mouse events vmouseover, vmousedown, vmousemove, vmouseup, vclick, vmousecancel"><a
        href="faq/how-do-i-use-touch-mouse-events.html">How do I use touch and mouse events?</a></li>

<li data-role="list-divider">Theme and styling</li>

<li data-section="Questions & Answers"
    data-filtertext="theme swatch css themeroller customize icons colors fonts style"><a
        href="faq/how-does-theming-work.html">How does theming work?</a></li>

<li data-role="list-divider">Apps</li>

<li data-section="Questions & Answers" data-filtertext="How do I need to configure PhoneGap Cordova?"><a
        href="faq/how-configure-phonegap-cordova.html">How do I need to configure PhoneGap/Cordova?</a></li>
<!--
<li data-role="list-divider">Navigation</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/nav-is-acting-erraticly.html">The nav is acting erratically!</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/deep-links-dont-work.html">Following a deep link ( a link to scroll to and id ) does not work.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/scripts-css-only-works-on-first-page-or-refresh.html">My script / css only works on first page or on refresh.</a></li>
<li data-role="list-divider">Widgets</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-double-enhanced.html">Cloning a widget or enhanced for element and enhancing causes "double" enhancement</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/cloned-content-does-not-update.html">Cloned widget or enhanced element does not update</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/data-enhance-false-does-not-work.html">Setting data-enhance="false" does not work.</a></li>

<li data-role="list-divider">General</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/selecting-element-by-id-not-working.html">Selecting elements by id only works sometimes or on first page!</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/global-config-settings-ignored.html">The global configuration settings i set are being ignored.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/custom-css-is-ignored.html">My custom css is ignored.</a></li>

<li data-role="list-divider">Events</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/swipe-triggered-when-scrolling.html">Swipe triggered when scrolling.</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/document-ready-not-working.html">Document ready ignored after first page.</a></li>

<li data-role="list-divider">Theming &amp; custom styles</li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add custom icons?</a></li>

<li data-section="Questions & Answers" data-filtertext=""><a href="faq/#">How do I add remove the circle behind the icons?</a></li>
-->

</ul>
</div>

</div>
<!-- /header -->

<div data-role="content" class="jqm-content">

    <h2>Question:</h2>

    <h1>How does theming work?</h1>

    <h2>Answer:</h2>

    <p class="jqm-intro">The jQuery Mobile theme system separates color and texture from structural styles that define
        things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet
        and to be mixed, matched, and combined to achieve a wide range of visual effects. </p>

    <h2>Customize with ThemeRoller</h2>

    <p>The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller"
                                                              rel="external">ThemeRoller tool</a>. It allows you to
        build a theme, then download a custom CSS file, ready to be dropped into your project. View a tutorial on <a
                href="http://learn.jquery.com/jquery-mobile/theme-roller/">how to use ThemeRoller to create a custom
            theme</a> on the learn site.</p>

    <h2>Default theme swatch mapping for components</h2>

    <p>If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for
        headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize
        contrast between the both.</p>

    <p>All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in
        listviews, the header of nested list pages, and the button of split button lists. Those default to "b" (blue in
        the default theme). Count bubbles default to "c" (silver in the default theme).

    <p>Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an
        active selected item. See the <strong>Global "Active" state</strong> further down this page for further
        information on the <strong>active</strong> swatch.</p>

    <p>The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a"
        (black in the default theme) and the error message to swatch "e" (yellow in the default theme). You can
        configure those defaults globally..

    <h2>Themes &amp; swatches</h2>

    <p>Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius
        values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values
        for bars, content blocks, buttons and list items, and font <code>text-shadow</code>. </p>

    <p>The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping
        of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest
        level of visual priority (black in our default theme), "b" is secondary level (blue) and "c" is the baseline
        level (gray) that we use by default in many situations, "d" for an alternate secondary level and "e" as an
        accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you
        could add a new theme swatch "f" that has a red bar and button for use in error situations. </p>

    <p>Most theme changes can be done using ThemeRoller, but it's also simple to manually edit the base swatches in the
        default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles,
        rename the classes with the new swatch letter name, and tweak colors as you see fit.</p>


    <h3>Bars</h3>

    <p>The default theme contains the following five bar styles:</p>

    <div class="swatch-preview">
        <div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
        <div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
        <div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
        <div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
        <div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
    </div>
    <!-- end swatch-bars -->

    <p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given
        high visual priority in an application. To set the color of a bar to a different swatch color, simply add the
        <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ("b" or "d",
        for example) and the specified theme swatch color will be applied. </p>


    <h3>Content Blocks</h3>

    <p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the
        header color swatches in the theme. </p>

    <div class="swatch-preview">
        <div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
        <div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
        <div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
        <div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
        <div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
    </div>
    <!-- end swatch-bars -->


    <p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the
        default header "a".</p>


    <h2>Lists &amp; Buttons</h2>

    <p>Each swatch also includes default styles for interactive elements like list items and buttons. Each button has
        styles for normal, hover/focus and pressed states.</p>

    <div class="swatch-preview">
        <a href="index.html" data-role="button" data-theme="a" data-icon="arrow-l">Button A</a>
        <a href="index.html" data-role="button" data-theme="b" data-icon="arrow-l">Button B</a>
        <a href="index.html" data-role="button" data-theme="c" data-icon="arrow-l">Button C</a>
        <a href="index.html" data-role="button" data-theme="d" data-icon="arrow-l">Button D</a>
        <a href="index.html" data-role="button" data-theme="e" data-icon="arrow-l">Button E</a>
    </div>
    <!-- end swatch-bars -->


    <p>By default, any button that's placed in a bar is automatically assigned a swatch letter that matches its parent
        bar or content box. This behavior makes it easy to ripple a theme change through a page by setting a theme
        swatch on a parent because you know the buttons will maintain the same relative visual weight across themes.
        Since form elements use the button styles, they will also adapt to their parent container.</p>

    <p>If you want to add visual emphasis to a button, an alternate swatch color can be set by adding a <code>
        data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the
        framework won't override that color if the parent theme is changed, because you made a conscious decision to set
        it.</p>


    <h3>Global "Active" state</h3>

    <p>The jQuery Mobile framework uses a swatch called "active" (bright blue in the default theme) to consistently
        indicate the selected state, regardless of the individual swatch of the given widget. We apply this in
        navigation and form controls whenever there is a need to indicate what is currently selected. Because this theme
        swatch is designed for clear, consistent user feedback, it cannot be overridden via the markup; it is set once
        in the theme and applied by the framework whenever a selected or active state is needed. The styling for this
        state is in the theme stylesheet under the <code>ui-btn-active</code> style rules.</p>

    <fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
        <legend>Active is used for the on state of these toggles:</legend>
        <input type="radio" name=" radio-choice-a" id="radio-choice-a" value="on" checked="checked"/>
        <label for="radio-choice-a">On</label>
        <input type="radio" name=" radio-choice-a" id="radio-choice-b" value="off"/>
        <label for="radio-choice-b">Off</label>
    </fieldset>


    <h3>Icons</h3>

    <p>There is a core set of <a href="../widgets/icons/">standard icons</a> included in the framework that can be
        assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons
        in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good
        contrast on all background colors.</p>

    <h3>Theme classes</h3>

    <p>Assigning color swatches through the <code> data-theme</code> attribute is one way to leverage the theme system,
        but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the
        colors, textures and font formatting of your theme to any markup. This is especially useful when creating your
        own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in
        the theme stylesheet:</p>
    <dl>
        <dt><code>ui-bar-(a-z)</code></dt>
        <dd>Applies the toolbar theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-bar</code>
            structural class to add the standard bar padding styles.
        </dd>
        <dt><code>ui-body-(a-z)</code></dt>
        <dd>Applies the content body theme styles for the selected swatch letter. Commonly used in conjunction with
            <code>ui-body</code> structural class to add the standard content block padding styles.
        </dd>
        <dt><code>ui-btn-up-(a-z)</code></dt>
        <dd>Applies the button/clickable element theme styles for the selected swatch letter. Commonly used with the
            <code>ui-btn-hover-(a-z)</code> and <code>ui-btn-down-(a-z)</code> interaction class states to provide
            visual feedback and <code>ui-btn-active</code> to indicate the selected or "on" state.
        </dd>
        <dt><code>ui-corner-all</code></dt>
        <dd>Applies the theme's global border-radius for rounded corners and is used for container or grouped items in
            the framework (inset lists, radiobutton sets). There are additional classes for all the possible
            combinations of rounded corners, for example: <code>ui-corner-tl</code> (top left only), <code>-top</code>
            (both top corners), <code>-left</code> (both left corners), etc. A second full set of corner classes is
            provided for buttons so these can have a different corner radius. These use classes with a similar naming
            convention, but with "btn-corner" instead of "corner", like this: <code>.ui-<strong>btn-corner</strong>-all</code>.
        </dd>
        <dt><code>ui-shadow</code></dt>
        <dd>Applies the theme's global drop shadow to any element using CSS <code>box-shadow</code> property.</dd>
        <dt><code>ui-disabled</code></dt>
        <dd>Applies the disabled look and feel which essentially reduces the opacity of any element with this class to
            30%, hides the cursor, and sets <code>pointer-events: none;</code> which prevents any interaction in many
            modern browsers.
        </dd>
    </dl>

    <h3>Overriding themes</h3>

    <p>The themes are meant as a solid starting point, but are meant to be customized. Since everything is controlled by
        CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of
        theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of
        possible selectors against which to target style overrides. We recommend adding an external stylesheet to the
        <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all
        your style overrides. This allows you to easily update to newer versions of the library because overrides are
        kept separate from the library code.</p>


    <a href="index.html" class="jqm-button" data-role="button" data-inline="true" data-mini="true" data-icon="arrow-l"
       data-iconpos="left">All Questions &amp; Answers</a>

</div>
<!-- /content -->

<div data-role="footer" class="jqm-footer">
    <p class="jqm-version"></p>

    <p>Copyright 2013 The jQuery Foundation</p>
</div>
<!-- /footer -->
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal"
     data-theme="c">
    <ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos"
        class="jqm-list">
        <li data-role="list-divider">jQuery Mobile Demos</li>
        <li><a href="./">Home</a></li>
        <li><a href="intro/">Introduction</a></li>
        <li><a href="examples/">Demo Showcase</a></li>
        <li><a href="faq/">Questions & Answers</a></li>
        <li><a href="intro/rwd.html">Going Responsive</a></li>
        <li data-role="list-divider">Widget reference</li>
        <li data-section="Widgets" data-filtertext="accordions collapsible sets content formatting grouped inset mini">
            <a href="widgets/accordions/">Accordion</a></li>

        <li data-section="Widgets" data-filtertext="ajax navigation navigate event method"><a href="widgets/navigation/"
                                                                                              data-ajax="false">AJAX
            Navigation</a></li>

        <li data-section="Widgets"
            data-filtertext="autocomplete filter reveal listviews remote listviewbeforefilter placeholder"><a
                href="widgets/autocomplete/" data-ajax="false">Autocomplete</a></li>

        <li data-section="Widgets" data-filtertext="buttons inputs forms inline theme grouped icons mini disabled"><a
                href="widgets/buttons/" data-ajax="false">Buttons</a></li>

        <li data-section="Widgets" data-filtertext="checkboxes checkboxradio inputs forms mini disabled"><a
                href="widgets/checkbox/">Checkboxes</a></li>

        <li data-section="Widgets" data-filtertext="collapsibles content formatting"><a href="widgets/collapsibles/"
                                                                                        data-ajax="false">Collapsibles</a>
        </li>

        <li data-section="Widgets" data-filtertext="controlgroups selects checkboxradio buttons horizontal vertical"><a
                href="widgets/controlgroups/">Controlgroup</a></li>

        <li data-section="Widgets" data-filtertext="dialogs modal popups"><a href="widgets/dialog/">Dialogs</a></li>

        <li data-section="Widgets" data-filtertext="fixed toolbars headers footers sections fullscreen"><a
                href="widgets/fixed-toolbars/">Fixed toolbars</a></li>

        <li data-section="Widgets" data-filtertext="flip toggle switch binary slider selects forms disabled"><a
                href="widgets/sliders/switch.html" data-ajax="false">Flip switch toggle</a></li>

        <li data-section="Widgets" data-filtertext="footer toolbars footers sections"><a href="widgets/footers/">Footer
            toolbar</a></li>

        <li data-section="Widgets"
            data-filtertext="forms inputs slider button range toggle switch label disabled accessible fieldcontains elements">
            <a href="widgets/forms/">Form elements</a></li>

        <li data-section="Widgets" data-filtertext="grids columns blocks content formatting rwd responsive"><a
                href="widgets/grids/">Grids</a></li>

        <li data-section="Widgets" data-filtertext="header toolbars fixed fullscreen sections"><a
                href="widgets/headers/">Header toolbar</a></li>

        <li data-section="Widgets" data-filtertext="icons buttons disc position"><a href="widgets/icons/">Icons</a></li>

        <li data-section="Widgets" data-filtertext="links navigation ajax prefetch cache"><a
                href="widgets/links/">Links</a></li>

        <li data-section="Widgets" data-filtertext="listviews thumbnails icons nested split button collapsible ul ol"><a
                href="widgets/listviews/" data-ajax="false">Listviews</a></li>

        <li data-section="Widgets" data-filtertext="ajax loader overlay spinner pages"><a href="widgets/loader/"
                                                                                          data-ajax="false">Loader
            overlay</a></li>

        <li data-section="Widgets" data-filtertext="navbars navmenu toolbars links icons footer header"><a
                href="widgets/navbar/" data-ajax="false">Navbar</a></li>

        <li data-section="Widgets" data-filtertext="navbars persistent header footer links navmenu"><a
                href="widgets/fixed-toolbars/footer-persist-a.html">Navbar, persistent</a></li>

        <li data-section="Widgets" data-filtertext="pages single multipage templates ajax nav"><a href="widgets/pages/">Pages</a>
        </li>

        <li data-section="Widgets"
            data-filtertext="panels sliding nav modal transition display reveal overlay push rwd responsive"><a
                href="widgets/panels/">Panels <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets"
            data-filtertext="popup dialog modal transition tooltip lightbox form overlay screen flip pop fade transition">
            <a href="widgets/popup/">Popup</a></li>

        <li data-section="Widgets" data-filtertext="radiobuttons checkboxradio inputs forms disabled grouped"><a
                href="widgets/radiobuttons/">Radio buttons</a></li>

        <li data-section="Widgets" data-filtertext="selectmenus custom native multiple optgroup disabled forms"><a
                href="widgets/selects/">Select</a></li>

        <li data-section="Widgets" data-filtertext="slider, single sliders range inputs forms disabled"><a
                href="widgets/sliders/" data-ajax="false">Slider, single</a></li>

        <li data-section="Widgets" data-filtertext="slider, dual range sliders rangesliders inputs forms disabled"><a
                href="widgets/sliders/rangeslider.html" data-ajax="false">Slider, dual range <span class="ui-li-count">New</span></a>
        </li>

        <li data-section="Widgets" data-filtertext="tables column th td toggle responsive tables rwd hide show tabular">
            <a href="widgets/table-column-toggle/">Table, column toggle <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets" data-filtertext="tables reflow th td responsive rwd columns tabular"><a
                href="widgets/table-reflow/">Table, reflow <span class="ui-li-count">New</span></a></li>

        <li data-section="Widgets"
            data-filtertext="text inputs textarea numeric email tel file date time month clear pattern placeholder forms">
            <a href="widgets/textinputs/">Text inputs & textarea</a></li>

        <li data-section="Widgets" data-filtertext="page transitions animated pages ajax navigation flip slide fade pop"
            data-ajax="false"><a href="widgets/transitions/" data-ajax="false">Transitions</a></li>

    </ul>
</div>
<!-- /panel -->


</div>
<!-- /page -->
</body>
</html>
